<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link href="/src/assets/logo.svg" rel="icon" type="image/svg+xml"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>leisure</title>
    <style>
        .loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #43c3c0;
        }

        * {
            box-sizing: border-box;
        }

        .loader-wrapper .spinner {
            width: 100px;
            height: 100px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

        .loader-wrapper .spinner .cube {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            transform-style: preserve-3d;
            transition: transform 0.5s 0.1s;
            perspective: 9999px;
            color: #333;
            opacity: 1;
            position: relative;
        }

        .loader-wrapper .spinner .panelLoad {
            z-index: 11;
            top: 50%;
            animation: letter-cube-panel 2.2s infinite forwards;
        }

        .loader-wrapper .spinner .cube-face {
            font-family: "Open Sans", sans-serif;
            font-size: 50px;
            color: #66b1ff;
            box-shadow: inset 0 0 0 1px #66b1ff, 0 0 1px 1px #66b1ff;
        }

        .loader-wrapper .spinner-inner {
            transform: scale(0.6666666);
        }

        .loader-wrapper .cube-face {
            width: inherit;
            height: inherit;
            position: absolute;
            background: white;
            box-shadow: inset 0 0 0 1px #333, 0 0 1px 1px #333;
            opacity: 1;
        }

        .loader-wrapper .cube-face-front {
            transform: translate3d(0, 0, 40px);
            font-size: 57px;
        }

        .loader-wrapper .cube-face-back {
            transform: rotateY(180deg) translate3d(0, 0, 40px);
        }

        .loader-wrapper .cube-face-left {
            transform: rotateY(-90deg) translate3d(0, 0, 40px);
        }

        .loader-wrapper .cube-face-right {
            transform: rotateY(90deg) translate3d(0, 0, 40px);
        }

        .loader-wrapper .cube-face-top {
            transform: rotateX(90deg) translate3d(0, 0, 40px);
        }

        .loader-wrapper .cube-face-bottom {
            transform: rotateX(-90deg) translate3d(0, 0, 40px);
        }

        @keyframes letter-cube-panel {
            0% {
                transform: rotateY(0deg) rotateZ(0deg);
            }
            20% {
                transform: rotateY(90deg) rotateZ(0deg);
            }
            40% {
                transform: rotateX(45deg) rotateZ(45deg);
            }
            60% {
                transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
            }
            80% {
                transform: rotateX(310deg) rotateZ(230deg)
            }
            100% {
                transform: rotateX(360deg) rotateZ(360deg)
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="loader-wrapper">
        <div class="spinner spinner--socker">
            <div class="spinner-inner">
                <div class="cube panelLoad">
                    <div class="cube-face cube-face-front">
                        Q
                    </div>
                    <div class="cube-face cube-face-back">
                        C
                    </div>
                    <div class="cube-face cube-face-left">
                        Y
                    </div>
                    <div class="cube-face cube-face-right">
                        C
                    </div>
                    <div class="cube-face cube-face-bottom">
                        M
                    </div>
                    <div class="cube-face cube-face-top">
                        M
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/src/main.ts" type="module"></script>
</body>
</html>
